/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable import/first */
import { View, Text } from "@tarojs/components";
import Taro, { useLoad } from "@tarojs/taro";
import "./index.less";
import React from "react";
import { Button, Icon, Image } from "@antmjs/vantui";
import IconFont from "@/components/iconfont";

const User: React.FC = () => {
  useLoad(() => {
    console.log("Page loaded");
  });

  return (
    /*eslint jsx-quotes: 0*/
    <View className="w-full min-h-[100vh] bg-[#e2e2e2] flex flex-col">
      <View
        className="flex gap-2 px-3 py-2 bg-white"
        onClick={() => {
          Taro.navigateTo({
            url: "/pages/User/components/AccountManagement/index",
          });
        }}
      >
        <Image
          round
          width="60px"
          height="60px"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
        <View className="flex flex-col items-start justify-center flex-1">
          <Text>昵称</Text>
          <View>
            <Button plain hairline type="info" size="mini">
              账号信息管理
            </Button>
          </View>
        </View>
      </View>

      <View className="flex flex-col flex-1 gap-6 p-3">
        <View className="bg-white rounded-lg">
          <View
            className="h-[96px] bg-black flex justify-between items-center text-white px-3"
            style={{
              borderRadius: "5px 5px 0 0",
            }}
            onClick={() => {
              Taro.navigateTo({
                url: "/pages/User/components/MemberCenter/index",
              });
            }}
          >
            <View className="flex flex-col h-full justify-evenly">
              <Text className="text-[32px]">VIP会员</Text>
              <Text className="text-[24px]">一次配置，长期省心</Text>
            </View>
            <Text>立即开通</Text>
          </View>
          <View
            className="h-[80px] flex justify-between items-center text-[28px] px-3"
            onClick={() => {
              Taro.navigateTo({
                url: "/pages/User/components/MemberCenter/index",
              });
            }}
          >
            <View className="flex items-center h-full gap-3">
              <IconFont name="order" size={40} />
              <Text>会员中心</Text>
            </View>
            <Icon name="arrow" size={40}></Icon>
          </View>
        </View>

        <View
          className="flex justify-between px-3 h-[80px] items-center text-[28px] bg-[#efded0]"
          onClick={() => {
            Taro.navigateTo({
              url: "/pages/User/components/BusinessFiling/index",
            });
          }}
        >
          <View className="flex items-center h-full gap-3">
            <IconFont name="order" size={40} />
            <Text>企业主体责任报备</Text>
          </View>
          <Icon name="arrow" size={40}></Icon>
        </View>

        <View className="bg-white rounded">
          {[
            {
              label: "通知公告",
              icon: "",
              key: "notification",
              router: "/pages/Announcement/index",
            },
            {
              label: "操作指南",
              icon: "",
              key: "operationGuide",
              router: "/pages/User/components/OperationGuide/index",
            },
            {
              label: "我的收藏",
              icon: "",
              key: "collect",
              router: "/pages/PolicieRegula/index"
            },
          ].map((_item, _index) => (
            <View
              key={_item.key}
              className="flex justify-between px-3 h-[80px] items-center text-[28px] border-b-2 border-solid border-[#e2e2e2]"
              onClick={() => {
                if (_item.router) {
                  Taro.navigateTo({
                    url: _item.router,
                  });
                }
              }}
            >
              <View className="flex items-center h-full gap-3">
                <IconFont name="order" size={40} />
                <Text>{_item.label}</Text>
              </View>
              <Icon name="arrow" size={40}></Icon>
            </View>
          ))}
        </View>

        <View className="bg-white rounded">
          {[
            {
              label: "帮助中心",
              icon: "",
              key: "helpCenter",
              router: "/pages/User/components/HelpCenter/index",
            },
            {
              label: "填报常见问题",
              icon: "",
              key: "FAQ",
              router: "/pages/User/components/CommonProblem/index",
            },
          ].map((_item, _index) => (
            <View
              key={_item.key}
              className="flex justify-between px-3 h-[80px] items-center text-[28px] border-b-2 border-solid border-[#e2e2e2]"
              onClick={() => {
                if (_item.router) {
                  Taro.navigateTo({
                    url: _item.router,
                  });
                }
              }}
            >
              <View className="flex items-center h-full gap-3">
                <IconFont name="order" size={40} />
                <Text>{_item.label}</Text>
              </View>
              <Icon name="arrow" size={40}></Icon>
            </View>
          ))}
        </View>
        <Button
          className="w-full"
          type="info"
          onClick={() => {
            Taro.navigateTo({
              url: "/pages/Auth/Singin/index",
            });
          }}
        >
          去登录页注册账号
        </Button>
      </View>
    </View>
  );
};

export default User;
